
<template>
    <div class="loginpage" style="overflow:hidden;-webkit-app-region: drag">
        <div class="bodyBox" :style="bgstyle">
            <div class="close">
                <img src="../../assets/img/login/images/close_06.png" alt=""  @click="close" style="-webkit-app-region: no-drag;">
            </div>
            <div class="min">
                <img src="../../assets/img/login/images/min_09.png" @click='onMinfun' alt="">
            </div>
            <div class="loginBox">
                <div class="loginTitle">登录彩盟计划</div>
                <div class="error">
                    <div v-if="errmsgshow">
                        <img src="../../assets/img/login/images/error_03.png" alt="">
                        <span class="">{{errormsg}}</span>
                    </div>
                </div>

                <div class="username">
                   <span style="display: inline-block;width: 38px">用户名</span>
                    <input type="text" class="userInput" placeholder="请输入您的用户名" v-model="username" style="-webkit-app-region: no-drag;">
                </div>
                <div class="username password">
                    <span style="display: inline-block;width: 38px">密码</span>
                    <input type="password" class="userInput" placeholder="请输入您的密码" v-model="password" style="-webkit-app-region: no-drag;">
                </div>
                <div class="remember" style="width: 100%">
                    <el-row class="ckstyle" style="-webkit-app-region: no-drag;">
                        <el-col :span="17.5" style="width:210px" >
                            <span style="display: inline-block;width: 80px"><el-checkbox v-model="repwd" @change="repwdFn">记住密码</el-checkbox></span>
                            <span><el-checkbox v-model="zdlogin" @change="zdloginFn">自动登录</el-checkbox></span>
                        </el-col>
                        <el-col :span="6.5" class="fopass" ><span @click="forgetpass">忘记密码</span></el-col>
                    </el-row>

                </div>
                <div class="loginbutton" @click="checklogin">登录</div>
                <div class="nouser">
                    <span>没有账号？</span>
                    <div class="sign" @click="singFn"> 立即前往注册</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import IM_conf from '@/assets/js/IM_config';
import https from '@/public/https';
import { setTimeout } from 'timers';
 if (window.require) {
    var ipc = window.require('electron').ipcRenderer
  }
export default {
    name:"login",
    data() {
      return {
        checkList: ['0'],
        errmsgshow: false,
        errormsg:'',
        username:"",
        password:"",
        repwd: true,
        zdlogin: false,
        iszdlogin: '',
        isrepwd: false,
        bgstyle:{
            backgroundImage: "url(" + require("@/assets/img/login/images/login_03.png") + ")",
            backgroundRepeat: "no-repeat"
        }
      };
    },
    watch:{
        username:function(){
            this.errmsgshow = false
            this.errormsg = ''
        },
        password:function(){
            this.errmsgshow = false
            this.errormsg = ''          
        },
    },
    created(){
        if (window.require) { 
            ipc.send('loginWin');
       }   

       if(localStorage.getItem('username')){
           this.username = localStorage.getItem('username')
       } 
       if(localStorage.getItem('userpwd')){
           this.password = localStorage.getItem('userpwd')
       }

        if(localStorage.getItem('iszdlogin')){
            this.zdlogin = true
            setTimeout( () => {                
                this.checklogin()
            },3000)
        }    
    },

    methods:{
        repwdFn(){
           if(this.repwd){  //勾选记住密码
                this.zdlogin = true
            } else { //取消勾选密码
                this.zdlogin = false
            }
        },
        zdloginFn(){  //勾选自动登录
            if(this.zdlogin){
                this.repwd = true
            }
        },

        singFn(){  //注册
            ipc.send('add');
        },
        

        checklogin(){  //验证登录
             if(!this.username.length){
                this.errmsgshow = true
                this.errormsg = '请输入用户名'
                return
            } 

            if(this.username.length>11 || this.username.length<2){
                var uPattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,11}$/
                if(!uPattern.test(this.username)){
                    this.errmsgshow = true
                    this.errormsg = '用户名格式不对，请重新输入'
                }
                return
            }

             if(this.password.length == 0){
                this.errmsgshow = true
                this.errormsg = '请输入密码'
                return
            } 

            if(this.password.length<6 || this.password.length>16){
                var pPass1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
                if(!pPass1.test(this.password)){
                    this.errmsgshow = true
                    this.errormsg = '登录密码必须为6-16位数字和字母的组合'
                }
                return
            }
                
            https.post("common/postUserLogin",{user_name:this.username,password:this.password})
                .then(data=>{
                    if(data.status == 1){

                        if (this.repwd){  //记住密码
                            localStorage.setItem('username', this.username)
                            localStorage.setItem('userpwd', this.password)
                        }
                        if(this.zdlogin){  //自动登录
                            localStorage.setItem('username', this.username)
                            localStorage.setItem('userpwd', this.password)
                            localStorage.setItem('iszdlogin', this.zdlogin)
                        }
                        if(!this.zdlogin && !this.repwd) {         //清除cookie                     
                            localStorage.removeItem('username')
                            localStorage.removeItem('userpwd')
                            localStorage.removeItem('iszdlogin')
                        }
                        if(!this.zdlogin && this.repwd) {         //清除cookie                     
                            localStorage.removeItem('iszdlogin')
                        }    

                        this.$store.commit('setUserInfo',data.data);
                        sessionStorage.uid = data.data.id; //保存用户id;支付回调时需要
                        sessionStorage.token = data.data.token;
                        if (data.data.answer == 0){
                            this.$router.push('/QuestionMi');                         
                        }else{
                             const IM_SERVER_URL = "http://47.52.153.58:3000";
                             let userId = data.data.id.toString();
                             if(userId){
                                var loginInfo = {loginUserId:userId, loginToken:'47384h3uhjfh3j4j343j434h43'};
                                        IMSDK.loginImpl(loginInfo, IM_SERVER_URL, false);
                                }else{
                                    console.log('IM登录失败');
                                } 
                        }
                    }else{
                        this.errmsgshow = true
                        this.errormsg = data.message
                    }
                    
                });
        },

        // 保存cookie
        setCookie(name,pwd,exdays){
            var exdate=new Date();//获取时间

            if(exdays != -1){  //自动登录
                exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
                window.document.cookie="userName"+ "=" +name+";path=/;expires="+exdate.toGMTString();
                window.document.cookie="userPwd"+"="+pwd+";path=/;expires="+exdate.toGMTString();
                window.document.cookie="logintime"+"="+exdays+";path=/;expires="+exdate.toGMTString();

            } 
            
            if(exdays == -1) {  //记住密码
                window.document.cookie="userName"+ "=" +name
                window.document.cookie="userPwd"+"="+pwd
            }
            
        },

        // 获取cookie
        getCookie:function () {
            if (document.cookie.length>0) {
                this.isrepwd = true
                var arr=document.cookie.split('; ');
                if(arr.length>2){
                    this.iszdlogin = true
                }
                for (var i=0;i<arr.length;i++) {

                    var arr2=arr[i].split('=');

                    if (arr2[0]=='userName') {

                        this.username=arr2[1];

                    } else if (arr2[0]=='userPwd') {

                        this.password=arr2[1];

                    }

                }
            }
        },

        // 清除cookie
        clearCookie:function (name,pwd,day) {
            this.setCookie(name,pwd,day);
        },

        forgetpass(){  //忘记密码
             ipc.send('addpwd');
        },

        close(){  //关闭窗口
          if (window.require) { 
            ipc.send('window-close');
            }   
        },

         // 最小化主窗口
        onMinfun(){
            if (window.require) { 
                ipc.send('window-min');
        }   
        },
    }
}
</script>
<style scoped>
    @import url(../../assets/css/login/public.less);
    @import url(../../assets/css/login/login.less);
</style>
<style>
.forpass{
    font-size:12px;
    float: left;
    margin-left:30px !important;
    margin-top:2px !important;
}
.bodyBox .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #E52A20;
    border-color: none;
    
}
.bodyBox .el-checkbox__inner:hover{
    border-color: #E52A20;
}
.bodyBox .el-checkbox__input.is-checked+.el-checkbox__label{
    color:#333333;
    margin-right:2px;
}
.bodyBox .el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #E52A20;
}
.bodyBox .el-checkbox__label{
    font-size:12px;
    color:#333333;
}
.loginpage .el-checkbox__label{
    line-height: 22px;
}
.loginpage .el-checkbox{

    margin-right: 10px;
}
.loginpage .el-checkbox__label{
    padding-left: 8px;
}
.loginpage .el-message .el-icon-error{
    font-size: 12px !important;
}
.loginpage .el-icon-success{
    font-size: 14px !important;
}
.loginBox .el-checkbox__inner{
    top: -4px;
    margin-right: 4px
}
.loginBox .el-checkbox__input{
    line-height: 0px;
}

</style>



